<template>
	<view class="main">
		<!-- 订单状态: 0 待付款; 1 已付款 ; 2 已发货; 3: 已收货; 9 申请退款 -->
		<view class="topbar">
			<navigator url="/pages/mine/mine" open-type="switchTab" class="back"> < </navigator>
			<text>订单列表</text>
		</view>
		<radio-group @change="radioChange" class="head-bar">
			<label class="label" v-for="item in headItems" :key="item.value" :class="{'active':current==item.value}">
				<radio :value="item.value" :checked="item.value == current" />
				<view>{{item.title}}</view>
			</label>
		</radio-group>
		<view class="card-list">
			<view class="card" v-for="item in currentList">
				<view class="order-title">
					<text>订单编号：{{item.subList[0].orderId}}</text>
					<text v-show="current == '0'">未付款</text>
					<text v-show="current == '1'">等待发货</text>
					<text v-show="current == '2'">已发货</text>
					<text v-show="current == '3'">已收货</text>
				</view>
				<view class="sku-block">
					<image :src="item.subList[0].cover_img"></image>
					<view class="info">
						<view class="p1">
							<text class="name">{{item.subList[0].gname}}</text>
							<text class="price">￥{{item.subList[0].price}}</text>
						</view>
						<view class="p2">
							<text class="bianhao">编号:{{item.subList[0].sku_code}}</text>
							<text class="num">x {{item.subList[0].count}}</text>
						</view>
						<view class="p3">
							<text class="guige">规格:{{item.subList[0].color_text}}</text>
						</view>
					</view>
				</view>
				<view class="total-price">
					<text>时间:{{item.addTime}}</text>
					<text>合计:￥{{item.subList[0].price * item.subList[0].count}}</text>
				</view>
				<view class="btns">
					<view v-show="current == '0'" class="btn cancel-order" @tap="cancleOrder(item.subList[0].orderId)">取消订单</view>
					<view v-show="current == '0'" class="btn pay" @tap="pay(item.subList[0].orderId)">付款</view>
					<view v-show="current == '2'" class="btn closed" @tap="applyBack(item)" style="color:#DD534D;border-color:#DD534D;">申请退货</view>
					<view v-show="current == '2'" class="btn receive" @tap="doReceive(item.subList[0].orderId)">确认收货</view>
					<view v-show="current == '3'" class="btn closed">删除记录</view>
				</view>
			</view>
			<view class="card orderBack" v-show="current=='9'" v-for="item in orderBackList">
				<view class="order-title">
					<text>订单编号：{{item.orderId}}</text>
					<text v-show="item.process == '0'">等待处理</text>
					<text v-show="item.process == '1'">同意退货,等待卖家收货</text>
					<text v-show="item.process == '2'">卖家确认收货,已退款</text>
					<text v-show="item.process == '9'">拒绝退货</text>
				</view>
				<view class="sku-block">
					<image :src="item.cover_img"></image>
					<view class="info">
						<view class="p1">
							<text class="name">{{item.gname}}</text>
							<text class="price">￥{{item.order_price/(item.count)}}</text>
						</view>
						<view class="p2">
							<text class="bianhao">编号:{{item.sku_code}}</text>
							<text class="num">x {{item.count}}</text>
						</view>
						<view class="p3">
							<text class="guige">规格:{{item.color_text}}</text>
						</view>
					</view>
				</view>
				<view class="total-price">
					<text>时间:{{item.addtime}}</text>
					<text>退款金额:￥{{item.order_price}}</text>
				</view>
				<view class="btns">
					<view v-show="item.process == '9'" class="btn closed" @tap="applyAgain">申请客服</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { orderlist,delOrderPre,receive,applyBack,orderBackList } from '../../../api/order/order.js'
	
	export default {
		data() {
			return {
				current:'0',
				mark:'',
				currentList:[],
				orderBackList:[],
				list:[],
				headItems:[{
						title:'待付款',
						value:'0'
					},{
						title:'已付款',
						value:'1'
					},{
						title:'已发货',
						value:'2'
					},{
						title:'已收货',
						value:'3'
					},{
						title:'申请退款',
						value:'9'
					}		
				]
			};
		},
		onLoad(option){
			this.current = option.type
			this.getOrderList()
		},
		methods:{
			applyBack(item){
				uni.navigateTo({
					url:'./applyBack?item=' + JSON.stringify(item)
				})
			},
			doReceive(orderId){
				receive({
					id:orderId
				}).then(res=>{
					console.log(res)
				})
			},
			pay(orderId){
				// console.log(orderId)
				var payobj = {
					type:this.current,
					orderId:orderId
				}
				uni.setStorageSync('payobj', JSON.stringify(payobj))
				uni.navigateTo({
				    url: '/pages/mine/order/pay'
				});
				
			},
			getOrderList(){
				orderlist({
					userId:'bdecbb72264e4ec581061d4770a2e914'
				}).then(res=>{
					console.log(res)
					this.list = res.data.data.list
					this.currentList = this.list.filter(item=>item.status == this.current)
					console.log(this.currentList)
				})
			},
			cancleOrder(orderId){
				// console.log(orderId)
				delOrderPre({
					orderId
				}).then(res=>{
					console.log(res)
					var i = this.waitpaylist.findIndex(el=>el.subList[0].orderId == orderId)
					this.waitpaylist.splice(i,1)
					this.getOrderList()
				})
			},
			radioChange(e){
				// console.log(e)
				this.current = e.detail.value
				console.log(this.current)
				this.getOrderList()
				if(this.current=='9'){
					orderBackList({
						userId:'bdecbb72264e4ec581061d4770a2e914'
					}).then(res=>{
						console.log(res)
						this.orderBackList = res.data.data
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		.topbar{
				position: fixed;
				left: 0;
				top: 0;
				background-color: #354e44;
				color: #fff;
				width: 100%;
				height: 44px;
				line-height: 44px;
				text-align: center;
				z-index: 998;
				.back{
					font-size: 24px;
					position: absolute;
					left: 20px;
				}
		}
		.head-bar{
			position: fixed;
			left: 0;
			top: 0;
			top: 40px;
			display: flex;
			justify-content: space-around;
			width: 100%;
			height: 31px;
			padding-top: 7px;
			background-color: #354E44;
			border-top: 1px solid #C0C0C0;
			color: #fff;
			font-size: 15px;
			line-height: 31px;
			z-index: 999;
			.label {
				radio {
					display: none;
				}
			
				&.active {
					border-bottom: 2rpx solid #DD524D;
					color: #DD524D;
				}
			}
		}
		.card-list{
			margin-top: 100px;
			.card{
				width: 336px;
			    box-sizing: border-box;
			    padding: 18px;
			    border-radius: 12px;
			    background-color: #fff;
			    margin: 15px auto;
			    font-size: 12px;
			    color: #3E3E3E;
				.order-title{
					line-height: 16px;
				    display: -webkit-box;
				    display: -webkit-flex;
				    display: flex;
				    justify-content: space-between;
				    border-bottom: 1px solid #F1ECE7;
				    padding-bottom: 15px;
					text{
						color: #354E44;
					}
				}
				.sku-block{
				    display: flex;
				    justify-content: flex-start;
				    border-bottom: 1px solid #F1ECE7;
				    padding: 15px 0;
					image{
						display: inline-block;
						overflow: hidden;
						position: relative;
						width: 81px;
					    height: 81px;
					    flex-shrink: 0;
					    background-color: #8F8F94;
					}
					.info{
					    width: 235px;
					    margin-left: 14px;
						view{
							display: flex;
						    justify-content: space-between;
						    align-items: center;
						}
						.p1{
							font-size: 13px;
						    line-height: 37px;
							.name{
							    color: #3E3E3E;
							}
						}
						.p2{
						    font-size: 11px;
						    color: #8D8D8D;
						    line-height: 15px;
						    margin-top: 2px;
						}
						.p3{
								font-size: 11px;
						    color: #8D8D8D;
						    line-height: 15px;
						    margin-top: 2px;
						}
					}
				}
				.total-price{
					font-size: 13px;
				    line-height: 18px;
				    text-align: right;
				    margin-top: 7px;
				    display: -webkit-box;
				    display: -webkit-flex;
				    display: flex;
				    justify-content: space-between;
				}
				.btns {
					margin-top: 20rpx;
					display: flex;
					justify-content: flex-end;
				
					.btn {
						width: 124rpx;
						height: 50rpx;
						border: 1px solid #2D4F43;
						font-size: 26rpx;
						border-radius: 10rpx;
						color: #2D4F43;
						text-align: center;
						line-height: 50rpx;
						margin-left: 32rpx;
						&.btn-closed{
							width: auto;
							padding: 0 1em;
							border-color: #DD524D;
						}
					}
				}
			}
		}
	}
</style>
